<template>
  <div class="app-container">

    <!-- 开始分析按钮 -->
    <div class="analysis-button-container">
      <button class="analysis-button" @click="startAnalysis">开始分析</button>
    </div>

    <!-- 雷达图与表格区域 -->
    <div class="radar-table-container">
      <div class="radar-chart-container">
        <RadarChart :data="radarData" />
      </div>
      <div class="student-data-table">
        <table>
          <thead>
            <tr>
              <th>上课状态</th>
              <th>考试情况</th>
              <th>学习兴趣</th>
              <th>知识点掌握情况</th>
              <th>学习成绩</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ radarData.classStatus }}</td>
              <td>{{ radarData.examSituation }}</td>
              <td>{{ radarData.learningInterest }}</td>
              <td>{{ radarData.knowledgeMastery }}</td>
              <td>{{ radarData.academicPerformance }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 学情报告组件 -->
    <AcademicReport :reportData="reportData" />

    <!-- 下载报告按钮 -->
    <div class="download-button-container">
      <button class="download-button" @click="downloadReport">下载学情报告</button>
    </div>
  </div>
</template>

<script lang="ts">
import RadarChart from '../../components/StudentAcademyanalyse/RadarChart.vue';
import AcademicReport from '../../components/StudentAcademyanalyse/AcademyReport.vue';
import { ref } from 'vue';
import axios from 'axios';

export default {
  components: {
    RadarChart,
    AcademicReport
  },
  data() {
    return {
      // 雷达图数据
      radarData: {
        classStatus: 70,
        examSituation: 76,
        learningInterest: '中',
        knowledgeMastery: '60%',
        academicPerformance: 71
      },
      // 学情报告数据
      reportData: {
        performanceTrend: [70, 75, 80, 78, 85, 90],
        knowledgeMastery: [
          { subject: '经典力学', analysis: '76%', force: '90%' },
          { subject: '电磁学', field: '80%', electricity: '90%' }
        ],
        classEngagement: [
          { course: '力学课堂', lookDown: 10, answerQuestions: 2 },
          { course: '电磁学课堂', lookDown: 5, answerQuestions: 5 }
        ]
      }
    };
  },
  methods: {
    startAnalysis() {
      // 获取后端数据
      this.fetchAnalysisData();
    },
    fetchAnalysisData() {
      // 模拟从后端获取数据
      // 实际项目中，这里应该是API调用
      console.log('获取分析数据...');
      // 更新雷达图数据
      this.radarData = {
        classStatus: 70,
        examSituation: 76,
        learningInterest: '中',
        knowledgeMastery: '60%',
        academicPerformance: 71
      };
      // 更新学情报告数据
      this.reportData = {
        performanceTrend: [70, 75, 80, 78, 85, 90],
        knowledgeMastery: [
          { subject: '经典力学', analysis: '76%', force: '90%' },
          { subject: '电磁学', field: '80%', electricity: '90%' }
        ],
        classEngagement: [
          { course: '力学课堂', lookDown: 10, answerQuestions: 2 },
          { course: '电磁学课堂', lookDown: 5, answerQuestions: 5 }
        ]
      };
    },
    downloadReport() {
      // 下载报告逻辑
      console.log('下载学情报告');
      // 实际项目中，这里应该是生成PDF或其他格式的报告
    }
  }
};
</script>

<style scoped>
.app-container {
  font-family: 'Arial', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.analysis-button-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.analysis-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.analysis-button:hover {
  background-color: #0b7dda;
}

.radar-table-container {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  flex-wrap: wrap;
}

.radar-chart-container {
  width: 45%;
  min-width: 300px;
}

.student-data-table {
  width: 45%;
  min-width: 300px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

.download-button-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.download-button {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #e0e0e0;
}
</style>
